<template>
  <el-dialog
    :title="title"
    :visible="visible"
    width="600px"
    @close="close"
  >
    <el-form
      label-position="left"
      label-width="80px"
      :model="form"
      :rules="rules"
      ref="dialog"
    >
      <el-form-item :label="onceLabel" prop="content1">
        <el-input
          :placeholder="oncePlaceholder"
          v-model="form.content1"
          :readonly="onceReadonly"
          :disabled="onceDisabled"
        ></el-input>
      </el-form-item>
      <el-form-item :label="twiceLabel" prop="content2">
        <el-input
          :readonly="twiceReadonly"
          v-model="form.content2"
          :type="twiceType"
          :rows="twiceRows"
          :placeholder="twicePlaceholder"
          min="0"
          max="9.9"
          @input="handleInput"
        >
        <template slot="append">折</template></el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: [String,Number],
      default: "",
    },
    onceLabel: {
      type: [String,Number],
      default: "",
    },
    onceReadonly: {
      type: Boolean,
      default: false,
    },
    onceDisabled: {
      type: Boolean,
      default: false,
    },
    onceContent: {
      type: [String,Number],
      default: "",
    },
    oncePlaceholder: {
      type: [String,Number],
      default: "请输入内容",
    },
    onceType: {
      type: String,
      default: "text",
    },
    onceRows: {
      type: Number,
      default: 5,
    },
    twiceLabel: {
      type: String,
      default: "",
    },
    twiceReadonly: {
      type: Boolean,
      default: false,
    },
    twiceDisabled: {
      type: Boolean,
      default: false,
    },
    twiceContent: {
      type: [Number, String],
      default: "",
    },
    twicePlaceholder: {
      type: String,
      default: "请输入内容",
    },
    twiceType: {
      type: String,
      default: "number",
    },
    twiceRows: {
      type: Number,
      default: 5,
    },
    id: {
      type: [Number, String],
      default: "",
    },
  },
  data() {
    return {
      form: {
        content1: "",
        content2: "",
      },
      rules: {
        content2: [
          // { required: true, message: "折扣不能为空", trigger: "blur" },
          // {
          //   type: "number",
          //   validator: this.discountValidator,
          //   message: "请输入1-9.9之间的数字",
          //   trigger: "blur",
          // },
        ],
      },
    };
  },
  methods: {
    discountValidator(rule, value, callback) {
      if (value < 1 || value > 9.9 || !value) {
        return callback(new Error("输入折扣为1 - 9.9的数字"));
      }
      callback();
    },
    cancel() {
      this.$emit("cancel", false);
    },
    confirm() {
      this.$refs.dialog.validate((valid) => {
        if (valid) {
          this.$emit("confirm", this.id, this.form.content2);
          console.log(this.form);
        }
      });
    },
    close() {
      this.$emit("cancel", false);
    },
    handleInput(event) {

      if (isNaN(event)) {
        this.$message("请输入数字")
        return
      }

      let newValue = event;


      // 移除非数字和小数点之外的字符
      newValue = newValue.replace(/[^\d.]/g, "");
      // 只保留第一个小数点
      newValue = newValue.replace(/^\./, "");
      newValue = newValue.replace(/\.(?=.*\.)/g, "");
      // 限制在0到9.9之间
      if (
        newValue !== "" &&
        (parseFloat(newValue) < 0 || parseFloat(newValue) > 9.9)
      ) {
        newValue = parseFloat(newValue) < 0 ? "0" : "9.9";
      }
      // 限制小数点后只能输入一位数字
      const decimalIndex = newValue.indexOf(".");
      if (decimalIndex !== -1 && newValue.length - decimalIndex > 2) {
        newValue = newValue.slice(0, decimalIndex + 2);
      }
      this.form.content2 = newValue;
    },
  },
  watch: {
    visible(newVal) {
      if (newVal) {
        this.form.content1 = this.onceContent;
        this.form.content2 = this.twiceContent;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog-footer {
  text-align: center;
}
</style>
